<template>
    <div class="twocate-cpntainer" v-infinite-scroll="load">
        <TopSearch :title="title"></TopSearch>
        <van-tabs class="tabs" v-model:active="active" @click="changeActive">
            <van-tab title="全部"></van-tab>
            <van-tab :title="item.name" v-for="(item) in catelist" :key="item.id"></van-tab>
        </van-tabs>
        <button class="catebtn" @click="isShowCate = true">
            <van-icon color="#ccc" size="14px" name="arrow-down" />
        </button>
        <div class="catelist" v-if="isShowCate">
            <div class="topsel">
                <div class="sel">请选择分类</div>
                <van-icon @click="isShowCate = false" color="#f06742" size="14px" name="arrow-up" />
            </div>
            <div class="selcontent">
                <div class="selbtn mr-10" @click="closeCate">全部</div>
                <div class="selbtn mr-10" v-for="(item, index) in catelist" :key="item.id" @click="closeCate($event,index)">
                    {{ item.name }}</div>
            </div>
        </div>


        <div class="sort">
            <div @click="changeSort(1)" class="sortcard all mr-20" :class="{ 'active': sortIndex === 1 }">综合排序</div>
            <div @click="changeSort(3)" class="sortcard redio mr-20" :class="{ 'active': sortIndex === 3 }">最多播放</div>
            <div @click="changeSort(2)" class="sortcard updata mr-20" :class="{ 'active': sortIndex === 2 }">最近更新</div>
        </div>

        <CategoryCardList :list="sortList"></CategoryCardList>
    </div>
</template>

<script setup lang="ts">
import CategoryCardList from '@/components/categorycardlist/index.vue'


import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import categoryAPi, { type SubCategoriesModel, AlbumsModel,SortModel } from '@/api/category';

import TopSearch from '@/components/top-search/index.vue'
import { useRouter } from 'vue-router';

// 无限加载
const load = () => {
    // console.log(res)
    let list = ref<AlbumsModel[]>([]);
        if(sortList.value.length < total.value?.total!) {
            pageNum.value++
            list.value = sortList.value.concat(total.value!.albums)
        }
    // metadataValues.value = `${router.currentRoute.value.params.title},${tabName.value}`
    // getSortList()
    sortList.value = list.value
}






const router = useRouter()

// 频道名称
const tabName = ref('')

// 顶部频道列表改变回调
const changeActive = (e: any) => {
    // console.log(e)
    // getCategoryTwoList()
    let istwoList = tabList.value!.metadataValues?.some(item => item.name === e.target.innerHTML)
    if (istwoList) {
        router.push({
            name: 'CategoryId',
            params: {
                id: router.currentRoute.value.params.id as string,
                title: e.target.innerHTML
            }
        })
        title.value = e.target.innerHTML
        active.value = 0
        
        getCategoryTwoList()
    } else {
        // pageNum.value = pageNum.value++
        // pageSize.value = 40
        metadataValues.value = `${router.currentRoute.value.params.title},${e.target.innerHTML}`
        getSortList()
    }
    // console.log(istwoList)

    tabName.value = e.target.innerHTML


    if(active.value === 0) {
        metadataValues.value = ''
        getSortList()
    }
}









// 排序索引
const sortIndex = ref(1)

// 排序改变
const changeSort = (index:number) => {
    sortIndex.value = index
    sort.value = index
    if(index > 1) {
        metadataValues.value = `${router.currentRoute.value.params.title},${tabName.value}`
    }
    getSortList()
}










// 分类列表  分类循环

const catelist = ref<SubCategoriesModel[]>([])
const closeCate = (e:any,index?: any,) => {
    if ('number' === typeof (index)) {
        active.value = index + 1
    } else {
        active.value = 0
    }

    changeActive(e)



    
    isShowCate.value = false
}





// 分类列表是否显示
const isShowCate = ref(false)


// 频道栏索引
const active = ref(0)


const route = useRoute()


const tabList = ref<SubCategoriesModel>()

const id = ref('')
const title = ref('')

const getCategoryTwoList = async () => {
    try {
        let res = await categoryAPi.getCategoryTwoList(id.value)
        console.log(res.metadata[0])
        tabList.value = res.metadata[0]
        let istwoList = res.metadata[0].metadataValues?.some(item => item.name === title.value)
        // console.log(istwoList)
        if (!istwoList) {
            catelist.value = res.metadata[0].metadataValues!
        } else {
            catelist.value = res.metadata[0].metadataValues?.filter(item => item.name === title.value)![0].metadataValues![0].metadataValues!
            // console.log(catelist.value)
        }


    } catch (error) {
        console.error(error)
    }
}



// 获取排序数据
const pageNum = ref(0)
const pageSize = ref(20)
const sort = ref(1)
const metadataValues = ref('')

const sortList = ref<AlbumsModel[]>([])
const total = ref<SortModel>()
const getSortList = async () => {
    try {
        let res = await categoryAPi.getsortList(pageNum.value, pageSize.value, sort.value, +id.value, metadataValues.value)
        total.value = res
        sortList.value = res.albums
    } catch (error) {
        console.error(error)
    }
}
onMounted(() => {
    // let {id,name} = route.params.id
    id.value = route.params.id as string
    title.value = route.params.title as string
    getCategoryTwoList()
    // console.log(route.params.id)


    // 获取排序列表
    getSortList()
})
</script>

<style scoped lang="scss">
.twocate-cpntainer {
    position: relative;

    ::v-deep .van-tab--active {
        color: #40404c;
        font-size: 18px;
        font-weight: 500;
    }

    ::v-deep .van-tabs__line {
        background-color: #f06742;
        bottom: 15px;
    }

    .catebtn {
        border: none;
        position: absolute;
        right: 0px;
        top: 60px;
        border-left: 1px solid rgb(209, 208, 208);
        padding: 0 10px;
    }

    .catelist {
        position: absolute;
        background-color: #fff;
        width: 100%;
        top: 50px;
        z-index: 2;

        .topsel {
            display: flex;
            justify-content: space-between;
            padding: 0 20px 10px;
            border-bottom: 1px solid rgb(225, 225, 225);
            align-items: center;

            .sel {
                color: #bbb;
                font-size: 16px;
                border-right: 1px solid rgb(225, 225, 225);
                padding-right: 230px;
            }

        }

        .selcontent {
            padding: 10px 22px 0;
            display: flex;
            flex-wrap: wrap;

            .selbtn {
                background-color: #f3f4f5;
                font-size: 16px;
                height: 30px;
                margin-bottom: 10px;
                text-align: center;
                width: 100px;
                line-height: 30px;
                border-radius: 3px;
            }
        }
    }

    .sort {
        color: #888;
        font-size: 14px;
        display: flex;
        border-top: 1px solid #dad9d9;
        padding: 10px 30px 0;

        .sortcard {
            height: 24px;
            line-height: 24px;
        }

        .active {
            color: #fa8f77;
            border: 1px solid #fa8f77;
            width: 70px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border-radius: 20px;

        }

    }
}
</style>